﻿@page "/checkboxs"

<h3>Checkbox 多选框</h3>

<h4>一组备选项中进行多选</h4>

<Block Title="基础用法" Introduction="单独使用可以表示两种状态之间的切换，列头或者表头使用时可以表示三种状态之间的切换。组件支持泛型数据绑定，通过 <code>TItem</code> 设置绑定数据类型，通过 <code>State</code> 设置组件状态" CodeFile="checkbox.1.txt">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-4">
                <label class="control-label">混合</label>
                <Checkbox TItem="string" State="CheckboxState.Mixed" OnStateChanged="@OnStateChanged"></Checkbox>
            </div>
            <div class="form-group col-4">
                <label class="control-label">选中</label>
                <Checkbox TItem="string" State="CheckboxState.Checked" OnStateChanged="@OnStateChanged"></Checkbox>
            </div>
            <div class="form-group col-4">
                <label class="control-label">未选</label>
                <Checkbox TItem="string" State="CheckboxState.UnChecked" OnStateChanged="@OnStateChanged"></Checkbox>
            </div>
        </div>
    </div>
    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="禁用复选框" Introduction="复选框不可用状态，通过 <code>IsDisabled</code> 设置组件是否可用" CodeFile="checkbox.2.txt">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-4">
                <label class="control-label">混合</label>
                <Checkbox TItem="string" State="CheckboxState.Mixed" IsDisabled="true"></Checkbox>
            </div>
            <div class="form-group col-4">
                <label class="control-label">选中</label>
                <Checkbox TItem="string" State="CheckboxState.Checked" IsDisabled="true"></Checkbox>
            </div>
            <div class="form-group col-4">
                <label class="control-label">未选</label>
                <Checkbox TItem="string" State="CheckboxState.UnChecked" IsDisabled="true"></Checkbox>
            </div>
        </div>
    </div>
</Block>

<Block Title="Label 文字" Introduction="复选框显示文字，通过 <code>DisplayText</code> 设置组件显示文本，点击显示文字时组件状态也会进行翻转" CodeFile="checkbox.3.txt">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <Checkbox TItem="string" DisplayText="显示文字"></Checkbox>
            </div>
        </div>
    </div>
</Block>

<Block Title="双向绑定 boolean 数据" Introduction="绑定组件内变量，数据自动同步，绑定数据类型为 <code>boolean</code> 类型时自动翻转值" CodeFile="checkbox.4.txt">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <Checkbox TItem="bool" DisplayText="双向绑定" @bind-Value="@BindValue" OnStateChanged="@OnItemChanged"></Checkbox>
            </div>
            <div class="form-group col-12">
                <BootstrapInput TItem="bool" @bind-Value="@BindValue" disabled></BootstrapInput>
            </div>
        </div>
    </div>
    <Logger @ref="BinderLog" class="mt-3" />
</Block>

<Block Title="双向绑定 string 数据" Introduction="绑定组件内变量，数据自动同步" CodeFile="checkbox.5.txt">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <Checkbox TItem="string" DisplayText="双向绑定" @bind-Value="@BindString" OnStateChanged="@OnItemChangedString"></Checkbox>
            </div>
            <div class="form-group col-12">
                <BootstrapInput TItem="string" @bind-Value="@BindString" disabled></BootstrapInput>
            </div>
        </div>
    </div>
    <Logger @ref="BinderLog" class="mt-3" />
</Block>

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />